<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>drawLine</title>
</head>
<style>
canvas {
  display: block;
  border: 1px solid black;
}
</style>
<body>
  <canvas id="map" width="600" height="600">您的浏览器不支持canvas</canvas>
</body>

<script>
  const map = document.getElementById('map')
  const ctx = map.getContext('2d')
  
  
  /**
   * 当dpr较高时，canvas绘制的边缘会有模糊或锯齿，需要进行处理
   * 1. canvas 依照dpr进行放大
   * 2. css 依照dpr进行缩小
   * 3. ctx 依照dpr进行放大
  */

  const getDpr = ctx => {
    return window.devicePixelRatio || 1
  }

  const dpr = getDpr()
  const oldWidth = map.width
  const oldHeight = map.height

  // 放大canvas
  map.width = oldWidth * dpr
  map.height = oldHeight * dpr

  // 缩小CSS
  map.style.width = oldWidth + 'px'
  map.style.height = oldHeight + 'px'

  // ctx通过scale函数进行缩放
  ctx.scale(dpr, dpr)

  // 开始路径
  ctx.beginPath();

  // 线段样式设置
  ctx.lineWidth=20;
  ctx.strokeStyle='red';


  // 设置起点、中间点、终点
  ctx.moveTo(100, 100)
  ctx.lineTo(300, 300)
  ctx.lineTo(500, 200)

  // 绘制线段
  ctx.stroke();

  // 结束路径
  ctx.closePath();
  
  
</script>
</html>